.c-text-secondary {
	 color: #8c9296;
}
 .c-bg-slate {
	 background: #162328;
}
 .c-bg-blue-med-light {
	 background: #3597d4;
}
 .c-bg-gray-light {
	 background: #f6f8fa;
}
 .c-bg--alternate.c-bg-white.c-bg-gray-light .banner:not(.banner--interior-hero):not(footer):nth-child(odd) {
	 background: #fff;
}
 .c-bg--alternate.c-bg-white.c-bg-gray-light .banner:not(.banner--interior-hero):not(footer):nth-child(even) {
	 background: #f6f8fa;
}
 .t-center {
	 text-align: center;
}
 .t-white, .t-white * {
	 color: #fff;
	 fill: #fff;
}
 .t-sm {
	 font-size: 1em;
}
 .t-sm > p {
	 font-size: 1em;
}
 .t-base-font-size {
	 font-size: 16px !important;
}
 .t-white .t-sm, .t-white .t-sm * {
	 color: rgba(255, 255, 255, 0.66);
}
 .t-markdownify > p {
	 display: inline;
	 margin: 0;
	 padding: 0;
	 font-size: inherit;
}
 .u-hidden {
	 display: none;
}
 .tutorials .tutorials__content {
	 padding: 2.5em 1.875em 3.875em 1.875em;
}
 .tutorials figure {
	 margin: 0;
	 padding: 0;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}
 .tutorials figure pre, .tutorials figure code {
	 white-space: pre-wrap;
}
 .tutorials #annotated-code {
	 background: #f6f8fa;
	 margin: 3.75em -30px;
	 position: relative;
	 display: flex;
	 overflow: hidden;
	 -webkit-text-size-adjust: none;
}
 .tutorials #annotated-code + .alert {
	 margin-left: -30px;
	 margin-right: -30px;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container {
	 padding: 15px 0 215px 15px;
	 background: #f6f8fa;
	 flex: 0 0 715px;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block {
	 cursor: text;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block .highlight {
	 padding: 10px 15px;
	 position: relative;
	 z-index: 2;
	 margin: 0;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block .highlight pre, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block .highlight code {
	 margin: 0;
	 background: transparent !important;
	 font-size: 12.5px;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block .highlight code {
	 padding: 0;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container {
	 margin-left: 15px;
	 flex: 1;
	 background: #f9fafc;
	 position: relative;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container:after {
	 position: absolute;
	 content: "";
	 width: 1px;
	 height: 100%;
	 top: 0;
	 left: 0;
	 display: block;
	 background: rgba(0, 0, 0, .05);
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations {
	 list-style: none;
	 margin: 0;
	 padding: 15px;
	 position: absolute;
	 top: 0;
	 left: 0;
	 box-sizing: border-box;
	 transform: translateY(0px);
	 transition: transform 0.5s cubic-bezier(0, 0.475, 0.01, 1.035);
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li#annotated-code__top-fade, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li#annotated-code__bottom-fade {
	 display: block;
	 position: absolute;
	 left: 0;
	 top: -120px;
	 margin: 0;
	 transform: translateY(0px);
	 transition: transform 0.5s cubic-bezier(0, 0.475, 0.01, 1.035);
	 width: 100%;
	 height: 120px;
	 z-index: 2;
	 backface-visibility: hidden;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li#annotated-code__top-fade:after, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li#annotated-code__bottom-fade:after {
	 content: "";
	 display: block;
	 position: absolute;
	 left: 0;
	 top: 0;
	 width: 100%;
	 height: 100%;
	 box-shadow: 0 0 180px 100px rgba(249, 250, 252, 1);
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li#annotated-code__bottom-fade {
	 top: 120px;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li.annotation {
	 display: block;
	 padding: 15px 20px;
	 margin: 0;
	 font-size: 16px;
	 color: #5b5b5b;
	 position: relative;
	 cursor: text;
	 opacity: 0.5;
	 z-index: 1;
	 transition: opacity 0.1s ease, z-index 0.1s ease;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li.annotation code, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li.annotation code code {
	 font-size: 13px !important;
	 background: #eceef1;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li.annotation:after {
	 content: "";
	 display: block;
	 width: 0;
	 height: 0;
	 border-style: solid;
	 border-width: 8px 8px 8px 0;
	 border-color: transparent #fff transparent transparent;
	 top: 12px;
	 left: -8px;
	 opacity: 0;
	 transition: opacity 0.1s ease;
	 position: absolute;
	 z-index: 1;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li.annotation.focused {
	 opacity: 1;
	 z-index: 9 !important;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block .highlight:before, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li:before {
	 position: absolute;
	 display: block;
	 z-index: -1;
	 content: "";
	 box-shadow: 0 0 60px rgba(0, 0, 0, .08);
	 background: #fff;
	 opacity: 0;
	 width: 100%;
	 height: 100%;
	 top: 0;
	 left: 0;
	 transition: opacity 0.1s ease;
}
 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block.focused .highlight:before, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li.focused:before, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container ul#annotated-code__annotations li.focused:after {
	 opacity: 1;
}
 @media screen and (max-width: 1100px) {
	 .tutorials #annotated-code {
		 display: block;
		 overflow: auto;
		 margin-top: 50px;
		 margin-bottom: 0;
	}
	 .tutorials #annotated-code:before {
		 content: "Note that this tutorial is best viewed on a desktop browser.";
		 display: block;
		 padding: 30px;
		 background: rgba(0, 0, 0, .05);
		 border-bottom: 1px solid rgba(0, 0, 0, .1);
		 position: relative;
		 z-index: 99;
		 color: #232323;
		 opacity: 1;
	}
	 .tutorials #annotated-code + .alert {
		 margin-left: 0;
		 margin-right: 0;
	}
	 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container {
		 padding: 15px;
		 flex: none;
	}
	 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--annotations-container {
		 display: none;
	}
	 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block .highlight:before, .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container .annotated-code__code-block.focused .highlight:before {
		 display: none;
	}
}
 @media screen and (max-width: 960px) {
	 .tutorials .tutorials__content {
		 padding: 0 1.25em 1.875em 1.25em;
	}
	 .tutorials #annotated-code {
		 margin: 40px -20px;
	}
	 .tutorials #annotated-code:before {
		 padding: 20px;
	}
	 .tutorials #annotated-code .annotated-code__pane.annotated-code__pane--code-container {
		 padding: 5px;
	}
}
